/// 页面 * 表格

<template>
  <Page>
    <ExGrid v-bind="grid.bind" />
    <button @click="onGridValue"> Grid Value </button>
  </Page>
</template>

<script setup lang="tsx">
import type { Role } from '@/apis/system/user/Role'
import { apiQueryRolePage } from '@/apis/system/user/Role'

const grid = useGrid<Role>({
  height: 300,
  align: null,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { type: 'seq', width: 50 },
    { title: '权限字符', field: 'roleKey' },
    { title: '角色名称', field: 'roleName' },
    { title: '所属机构', field: 'virtualEnterpriseName' },
    { title: '修改时间', field: 'updateTime' },
    { title: '操作人', field: 'updateBy' },
  ],

  async queryPage(params) {
    const { total, list } = await apiQueryRolePage(params)
    return { total, list }
  },
})

const onGridValue = () => {
  // grid.value.length = 3
  // grid.setBind({ data: [...grid.value] })
  console.log(grid.getData())
  console.log(grid.getData(true))
  console.log(grid.api?.getData())
  grid.api?.request(1, 10)
}

onMounted(() => {
  grid.api?.request(1)
})
</script>

<style scoped lang="scss"></style>
